<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">

    <title>供应商邀请</title>
    <link href="../lib/fonts/material-icons.css?family=Material+Icons" rel="stylesheet">
    <link href="../lib/css/animate.min.css" rel="stylesheet">
    <link href="../lib/css/quasar.mat.rtl.min.css" rel="stylesheet" type="text/css">

    <style type="text/css">
      [v-cloak] { display: none }
      .bdl-secondary-3 { border-left: 3px solid #26a69a }
      .done-img { height: 300px; background-image: url(./static/img/done.png); background-size: contain; background-repeat: no-repeat }
    </style>
  </head>
  <body>
    <div id="q-supplier-invite" v-cloak>
      <q-card class="bg-white no-shadow full-width">
        <q-card-main>
          <q-stepper v-model="currentStep" ref="supplierInviteStepper" color="primary" contractable>
            <q-step name="supplierInvite" title="供应商邀请">
              <div class="row">
                <q-btn 
                  color="primary" 
                  style="font-size:14px"
                  @click="sendEmail"
                  :loading="btnLoading"
                  >
                  <q-icon name="mail_outline"></q-icon>
                  <span>发送</span>
                </q-btn>
                <q-btn 
                  color="primary" 
                  flat
                  style="font-size:14px"
                  class="q-ml-sm"
                  @click="window.location.href = 'supplier.html'"
                  >
                  <span>返回</span>
                </q-btn>
              </div>
              <div class="row q-pa-sm bg-grey-3 bdl-secondary-3 q-mt-sm">
                <strong class="col-xs-12 col-sm-3 col-md-2 col-lg-2 text-dark q-mt-xs">邮件标题：</strong>
                <div class="col-xs-12 col-sm-9 col-md-10 col-lg-10 row">
                  <q-field 
                    :error="$v.emailTitle.$error"
                    class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <q-input
                      @blur="$v.emailTitle.$touch"
                      v-model="emailTitle"></q-input>
                  </q-field>
                </div>
              </div>
              <div class="row q-pa-sm bg-grey-3 bdl-secondary-3 q-mt-sm">
                <strong class="col-xs-12 col-sm-3 col-md-2 col-lg-2 text-dark q-mt-xs">已选供应商：</strong>
                <div class="col-xs-12 col-sm-9 col-md-10 col-lg-10 row justify-between">
                  <div>
                    <q-chip 
                      v-for="supplier in chipsArr"
                      :key="supplier.id"
                      class="q-mr-sm"
                      color="secondary" 
                      closable
                      small 
                      @hide="closeChip(supplier)">
                      {{ supplier.vendorName }}
                    </q-chip>
                  </div>
                  <q-icon 
                    name="add_circle_outline" 
                    color="primary" 
                    @click.native="backSupplier"
                    class="cursor-pointer"></q-icon>
                </div>
              </div>
              <div class="row q-pa-sm bg-grey-3 bdl-secondary-3 q-mt-sm">
                <strong class="col-xs-12 col-sm-3 col-md-2 col-lg-2 text-dark q-mt-xs">选择模板：</strong>
                <div class="col-xs-12 col-sm-9 col-md-10 col-lg-10 q-mt-xs">
                  <q-radio 
                    v-model="moduleChecked" 
                    class="q-mr-sm"
                    v-for="module in moduleData"
                    :key="module.id"
                    :val="module.id" 
                    :label="module.name"
                    color="secondary"></q-radio>
                </div>
              </div>
              <div class="row q-mt-sm">
                <q-editor
                  min-height="300px"
                  max-height="400px"
                  style="width:100%"
                  :definitions="editorOptions"
                  :toolbar="toolbarOptions"
                  :fonts="fontsOptions"
                  v-model="moduleEditor">
                </q-editor>
              </div>
            </q-step>
            <q-step name="supplierRegiste" title="供应商注册" disable>
              <div class="row justify-center">
                  <img src="../static/img/done.png" style="width:400px;height:400px" />
              </div>
              <h6 class="q-mt-md" style="text-align:center">已成功邀请，等待供应商注册！</h6>
              <div class="row justify-center">
                <q-btn outline style="color: goldenrod;" @click="backSupplier">回到列表页</q-btn>
              </div>
            </q-step>
            <q-step name="supplierApproval" title="供应商审批" disable>

            </q-step>
          </q-stepper>
        </q-card-main>
      </q-card>
      <q-modal 
        no-backdrop-dismiss
        v-model="chooseSupplierModal" 
        @show="chooseModalOpen"
        :content-css="{minWidth: '50vw', minHeight: '450px',borderRadius: '4px'}">
        <q-modal-layout>
          <q-toolbar slot="header" color="white">
            <q-toolbar-title class="text-dark">
              选择供应商
            </q-toolbar-title>
            <q-btn flat @click="chooseSupplierModal = false">
              <q-icon name="close" color="dark"></q-icon>
            </q-btn>
          </q-toolbar>
          <q-card class="bg-white no-shadow full-width">
            <q-card-main>
              <q-select
                v-model="supplierSelected"
                float-label="请选择供应商"
                multiple
                chips
                filter
                filter-placeholder="输入您要查找的供应商名称"
                :options="supplierData"
              ></q-select>
              <q-checkbox 
                v-model="supplierAddChecked" 
                class="q-mt-sm"
                val="checked_1" 
                label="手动添加" 
                color="secondary"></q-checkbox>
              <div v-if="supplierAddChecked[0] === 'checked_1'">
                <div v-for="item in addForm" :key="item.index" class="q-px-md q-my-sm">
                  <q-input
                    float-label="供应商名称"
                    v-model="item.supplierName"></q-input>
                  <q-input
                    float-label="供应商邮箱"
                    v-model="item.supplierEmail"></q-input>
                </div>
                <div class="row q-mt-sm">
                  <q-btn 
                    flat 
                    color="secondary" 
                    size="sm" 
                    @click="continueAddSupplier">继续添加</q-btn>
                </div>
              </div>
            </q-card-main>
          </q-card>
          <q-toolbar slot="footer" color="white" class="row justify-end">
            <q-btn
              flat
              color="primary"
              @click="chooseSupplierModal = false">取消</q-btn>
            <q-btn
              flat
              :loading="btnLoading"
              color="primary"
              @click="saveAddHandler">保存</q-btn>
          </q-toolbar>
        </q-modal-layout>
      </q-modal>
    </div>
    
    <!-- ie-polyfill 、 vue.js and quasar-framework -->
    <script src="../lib/js/quasar.ie.polyfills.umd.min.js"></script>
    <script src="../lib/js/vue.js"></script>
    <script src="../lib/js/quasar.mat.umd.min.js"></script>
    <!-- babel for es6 transform -->
    <!-- <script src="lib/js/babel.min.js"></script> -->
    <!-- vue validate -->
    <script src="../lib/js/vuelidate.min.js"></script>
    <script src="../lib/js/validators.min.js"></script>
    <!-- consts ps: always leave this file first -->
    <script src="../script/consts.js"></script>
    <!-- status code -->
    <script src="../script/status.code.js"></script>
    <!-- qs for axios -->
    <script src="../lib/js/qs.min.js"></script>
    <!-- axios for http request -->
    <script src="../lib/js/axios.js"></script>
    <!-- axios.instance must be after axios -->
    <script src="../script/axios.instance.js"></script>
    <!-- quasar i18n zh-hans -->
    <script src="../lib/lang/zh-hans.js"></script>
    <!-- vue-i18n for application's internationalization -->
    <script src="../lib/js/vue-i18n.js"></script>
    <!-- current page international file -->
    <script src="../lang/sop/supplierInvite.js"></script>
    <script>
      // quasar components use
      Quasar.i18n.set(Quasar.i18n[LANGUGE])
      Vue.prototype.window = window

      Vue.use(window.vuelidate.default)
      var required = window.validators.required
      var supplierInvite = new Vue({
        el: '#q-supplier-invite',
        i18n: i18n,
        data: function () {
          return {
            currentStep: 'supplierInvite',
            chipsArr: [], // chip 数据
            moduleChecked: 'module_1',
            companyChecked: 'company_2',
            emailTitle: '',
            moduleEditor: '',
            editorOptions: {
            },
            fontsOptions: {
              arial: 'Arial',
              arial_black: 'Arial Black',
              comic_sans: 'Comic Sans MS',
              courier_new: 'Courier New',
              impact: 'Impact',
              lucida_grande: 'Lucida Grande',
              times_new_roman: 'Times New Roman',
              verdana: 'Verdana'
            },
            chooseSupplierModal: false,
            btnLoading: false,
            supplierSelected: [],
            supplierAddChecked: [],
            supplierData: [],
            addForm: [
              {
                supplierName: '',
                supplierEmail: ''
              }
            ],
            moduleData: []
          }
        },
        validations: {
          emailTitle: { required: required }
        },
        computed: {
          toolbarOptions: function() {
            return [
              ['bold', 'italic', 'strike', 'underline', 'subscript', 'superscript'],
              ['token', 'hr', 'link', 'custom_btn'],
              ['print', 'fullscreen'],
              [
                {
                  label: this.$q.i18n.editor.formatting,
                  icon: this.$q.icon.editor.formatting,
                  list: 'no-icons',
                  options: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'code']
                },
                {
                  label: this.$q.i18n.editor.fontSize,
                  icon: this.$q.icon.editor.fontSize,
                  fixedLabel: true,
                  fixedIcon: true,
                  list: 'no-icons',
                  options: ['size-1', 'size-2', 'size-3', 'size-4', 'size-5', 'size-6', 'size-7']
                },
                {
                  label: this.$q.i18n.editor.defaultFont,
                  icon: this.$q.icon.editor.font,
                  fixedIcon: true,
                  list: 'no-icons',
                  options: ['default_font', 'arial', 'arial_black', 'comic_sans', 'courier_new', 'impact', 'lucida_grande', 'times_new_roman', 'verdana']
                },
                'removeFormat'
              ],
              ['quote', 'unordered', 'ordered', 'outdent', 'indent'],
              [
                {
                  label: this.$q.i18n.editor.align,
                  icon: this.$q.icon.editor.align,
                  fixedLabel: true,
                  list: 'only-icons',
                  options: ['left', 'center', 'right', 'justify']
                }
              ],
              ['undo', 'redo']
            ]
          }
        },
        created: function () {
          this.getModuleData()
          // vue-i18n
          this.$i18n.locale = LANGUGE
          if (this.$q.sessionStorage.has('supplierList_selected_rows')) {
            this.chipsArr = this.$q.sessionStorage.get.item('supplierList_selected_rows')
          }
        },
        watch: {
          chipsArr: function(chipsArr) {
            this.$q.sessionStorage.set('supplierList_selected_rows', this.chipsArr)
          },
          moduleChecked: function(moduleChecked) {
            this.getModuleContent(moduleChecked)
          }
        },
        methods: {
          getModuleData: function() {
            var that = this
            axios({
              method: 'post',
              url: '/manager/new/emailTemplate/byType',
              data: {
                type: 1
              }
            })
            .then(function(data) {
              if (data.statusCode == 200) {
                that.moduleData = data.rows
                that.moduleChecked = that.moduleData[0].id // 默认选中
              } else {
                that.$q.notify({
                  message: that.$t(STATUS_CODE[data.statusCode]),
                  icon: 'error_outline',
                  type: 'negative',
                  position: 'top-right'
                })
              }
            })
            .catch(function(err) {
              console.log(err)
            })
          },
          getModuleContent: function(moduleChecked) {
            var that = this
            axios({
              method: 'post',
              url: '/manager/new/emailTemplate/byId',
              data: {
                id: moduleChecked
              }
            })
            .then(function(data) {
              if (data.statusCode == 200) {
                that.moduleEditor = data.single.content
              } else {
                that.$q.notify({
                  message: that.$t(STATUS_CODE[data.statusCode]),
                  icon: 'error_outline',
                  type: 'negative',
                  position: 'top-right'
                })
              }
            })
            .catch(function(err) {
              console.log(err)
            })
          },
          closeChip: function (arg) {
            if (this.chipsArr.indexOf(arg) > -1) {
              var ind = this.chipsArr.indexOf(arg)
              this.chipsArr.splice(ind, 1)
            }
          },
          chooseModalOpen: function () {
            this.supplierAddChecked = []
            this.addForm = [
              {
                supplierName: '',
                supplierEmail: ''
              }
            ]
          },
          continueAddSupplier: function () {
            this.addForm.push({
              supplierName: '',
              supplierEmail: ''
            })
          },
          saveAddHandler: function () {

          },
          sendEmail: function() {
            this.$v.emailTitle.$touch()
            if (this.chipsArr.length > 0 && !this.$v.emailTitle.$error) {
              this.btnLoading = true
              var idSelected = []
              this.chipsArr.forEach(function(e) {
                idSelected.push(e.id)
              })
              var that = this
              axios({
                method: 'post',
                url: '/manager/new/invitationToRegister/invitationSupplier',
                data: {
                  ids: idSelected.join(','),
                  emailTemplateId: this.moduleChecked,
                  content: this.moduleEditor,
                  title: this.emailTitle
                }
              })
              .then(function(data) {
                if (data.statusCode == 200) {
                  that.btnLoading = false
                  // that.currentStep = 'supplierRegiste'
                  that.$refs.supplierInviteStepper.goToStep('supplierRegiste')
                  that.$q.sessionStorage.remove('supplierList_selected_rows')
                } else {
                  that.$q.notify({
                    message: that.$t(STATUS_CODE[data.statusCode]),
                    icon: 'error_outline',
                    type: 'negative',
                    position: 'top-right'
                  })
                }
              })
              .catch(function(err) {
                console.log(err)
              })
            } else {
              if (this.chipsArr.length == 0) {
                this.$q.notify({
                  message: '请先选择您要邀请的供应商！',
                  type: 'warning',
                  icon: 'warning',
                  position: 'top-right'
                })
              }else {
                this.$q.notify({
                  message: '请填写邮件标题！',
                  type: 'warning',
                  icon: 'warning',
                  position: 'top-right'
                })
              }
            }
          },
          backSupplier: function() {
            window.location.href = "supplier.html"
          }
        }
      })
    </script>
  </body>
</html>